<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('详情')" />
    <style>
        [v-cloak] {
            display: none;
        }

        * {
            margin: 0;
            padding: 0;
            user-select: none;
        }

        .container-div {
            padding: 6px;
        }

        .clearFloat:after {
            display: block;
            clear: both;
            content: "";
            visibility: hidden;
            height: 0
        }

        .clearFloat {
            zoom: 1
        }

        .leftBox {
            float: left;
        }

        .rightBox {
            float: right;
        }

        .bigShelfBox {
            width: 86%;
            box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.1);
            border-radius: 4px;
            margin-left: 1%;
            margin-right: 1%;
        }

        .bigShelfBox .shelfBox {
            height: 0;
        }

        .bigShelfBox .shelfBox .shelf {
            width: 80%;
            margin-left: 10%;
            height: 0;
            /*padding-bottom: 80%;*/
            /* outline: 1px solid black; */
            background: lightgrey;
            position: relative;
            margin-top: 10%;
        }

        .bigShelfBox .shelfBox .shelf.current {
            background: lightgreen;
        }

        .bigShelfBox .shelfBox .shelf.sel {
            background: lightcoral;
        }

        .bigShelfBox .shelfBox .shelf .showBox {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 200px;
            border: 1px solid #DCDFE6;
            border-radius: 4px;
            background: #fff;
            z-index: 10;
            padding: 6px;
            user-select: none;
        }

        .leftNav {
            width: 12%;
            height: 500px;
            /* background: lightblue; */
            user-select: none;
        }

        .navTop {
            width: 60%;
            min-width: 100px;
            margin: 0 auto;
            text-align: center;
        }

        .LeftNavTitle {
            line-height: 25px;
            border-bottom: 1px solid #DCDFE6;
            margin-bottom: 10px;
            margin-top: 20px;
            font-size: 18px;
            color: #303133;
        }

        .NavTopBtn {
            width: 75%;
            height: 40px;
            min-width: 80px;
            min-height: 40px;
            line-height: 30px;
            font-size: 18px;
            border: 1px solid #DCDFE6;
            background: #F2F6FC;
            border-radius: 4px;
            margin: 0 auto;
            margin-bottom: 10px;
            color: #303133;
        }

        .NavTopBtn:hover {
            background: #53a8ff;
            color: #fff;
            cursor: pointer;
        }

        .NavTopBtn.bottom {
            height: 90px;
        }

        .NavTopBtn.bottom span:first-child {
            display: inline-block;
            width: 75%;
            height: 40px;
            /* background: lightslategray; */
            background: url();
            margin-top: 10px;
            background-size: 100% 100%;
        }

        .NavTopBtn.bottom span:last-child {
            display: inline-block;
        }

        .appHearder {
            width: 100%;
            height: 50px;
            /* background: lightgray; */
            margin-bottom: 30px;
            /* border-bottom: 1px solid #DCDFE6; */
        }

        .hearderNav {
            width: 100%;
            height: 49px;
            border-bottom: 1px solid #DCDFE6;
            padding-left: 10px;
        }

        .hearderNav span {
            display: inline-block;
            width: 100px;
            height: 50px;
            line-height: 45px;
            text-align: center;
            border-top: 3px solid transparent;
            border-left: 1px solid transparent;
            border-right: 1px solid transparent;
            float: left;
            border-radius: 4px;
        }

        .hearderNav span.current {
            border-top: 3px solid #409eff;
            border-left: 1px solid #DCDFE6;
            border-right: 1px solid #DCDFE6;
            cursor: pointer;
        }

        .hearderNav span:hover {
            border-top: 3px solid #9dceff;
            border-left: 1px solid #DCDFE6;
            border-right: 1px solid #DCDFE6;
            cursor: pointer;
        }

        .hearderBody {
            width: 100%;
        }

        .sousuo {
            margin-top: 20px;
            margin-bottom: 35px;
        }

        .sousuo * {
            float: left;
            margin-left: 5px;
        }

        .sousuo button {
            width: 60px;
            height: 35px;
            font-size: 16px;
            border: 0;
            border-radius: 4px;
            background: #3a88fd;
            color: #fff;
            cursor: pointer;
        }

        .sousuo span {
            display: inline-block;
            width: 6%;
            height: 35px;
            line-height: 35px;
            font-weight: bold;
            text-align: right;
        }

        .sousuo input {
            width: 14%;
            height: 35px;
            border: 1px solid #DCDFE6;
            border-radius: 4px;
        }

        .shelfBottomNav {
            width: 88%;
            /* height: 180px; */
            /* background: #eee; */
            margin-top: 50px;
            border-top: 1px solid #DCDFE6;
            padding-top: 20px;
        }

        .shelfNav {
            /* height: 120px; */
            border-left: 8px solid #409eff;
            margin-left: 2%;
            margin-right: 2%;
            padding-left: 1%;
            padding-right: 1%;
            padding-top: 1px;
            padding-bottom: 1px;
            float: left;
            border-radius: 4px 0 0 4px;
        }

        .shelfNav p {
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .colorBlock {
            display: inline-block;
            width: 50px;
            height: 20px;
            border: 1px solid #DCDFE6;
            border-radius: 4px;
            float: left;
        }

        .colorBlock.notHave {
            background: #d3d3d3;
        }

        .colorBlock.have {
            background: #90ee90;
        }

        .colorBlock.select {
            background: #f08080;
        }

        .colorBlockTitle {
            display: inline-block;
            height: 20px;
            line-height: 20px;
            float: left;
            margin-left: 10px;
        }

        .colorBlockNumber {
            display: inline-block;
            height: 20px;
            line-height: 20px;
            float: left;
            margin-left: 10px;
            color: red;
        }

        .p_Title {
            display: inline-block;
            height: 20px;
            line-height: 20px;
            float: left;
        }
        .ddj{
            width: 86%;
            border-top: 2px solid #DCDFE6;
            margin-top: 25px;
            margin-bottom: 25px;
            margin-right: 1%;
            position: relative;
        }
        .smallCad{
            display: inline-block;
            /* background: url(); */
            background-size: 100% 100%;

            height: 40px;
            line-height: 40px;
            text-align: center;
            border: 1px solid #DCDFE6;
            border-radius: 4px;
            background: #F2F6FC;
            font-size: 20px;
            font-weight: bold;
            position: absolute;
            top: -20px;
            left: 0%;
            transition: left 20s cubic-bezier(1, 1.01, 0.02, 0.01) 0s;
            /* transition-timing-function: cubic-bezier(0.48, 0.49, 0.74, 0.75); */
        }
    </style>
</head>
<body >


        <div class="container-div" onmousemove="parent.updateTimeOut()">

            <div class="appHearder">
                <div class="hearderNav clearFloat">
                    <span :class="tabsFlg==1?'current':''" @click="tabsFlg=1">快速操作</span>
                    <span :class="tabsFlg==2?'current':''" @click="tabsFlg=2">查询定位</span>
                </div>
                <div class="hearderBody">
                </div>
            </div>
            <div v-show="tabsFlg==1" class="appBody clearFloat">
                <div class="sousuo clearFloat">
                    <span @click="tranCad">托盘号</span>
                    <input type="number" v-model="shelfIndex">
                    <button @click="selectShelf('position')">定位</button>
                    <button @click="selectShelf('clear')" style="background: #0000ff;">重置</button>
                </div>
                <div class="leftNav leftBox">
                    <div class="navTop">
                        <p class="LeftNavTitle">货区列表</p>
                        <button class="NavTopBtn" v-for="area in areas" @click="getCellListByAreaId(area.areaId)" >{{area.areaName}}</button>


                    </div>
                    <div class="navTop">
                        <p class="LeftNavTitle">出入库口</p>

                        <!--                    <button class="NavTopBtn" v-for="door in doors" v-bind:value="door.doorId">{{door.name}}</button>-->
                        <!--                    <div class="NavTopBtn bottom">-->
                        <!--                        <span></span>-->
                        <!--                        <span v-for="door in doors" v-bind:value="door.doorId">{{door.doorName}}</span>-->
                        <!--                    </div>-->


                        <div class="NavTopBtn bottom"  v-for="door in doors" v-bind:value="door.doorId">
                            <span></span>
                            <span>{{door.name}}</span>
                        </div>


                        <!--                    <div class="NavTopBtn bottom">-->
                        <!--                        <span></span>-->
                        <!--                        <span>出入库name</span>-->
                        <!--                    </div>-->
                        <!--                    <div class="NavTopBtn bottom">-->
                        <!--                        <span></span>-->
                        <!--                        <span>出入库name</span>-->
                        <!--                    </div>-->
                        <!--                    <div class="NavTopBtn bottom">-->
                        <!--                        <span></span>-->
                        <!--                        <span>出入库name</span>-->
                        <!--                    </div>-->
                        <!--                    <div class="NavTopBtn bottom">-->
                        <!--                        <span></span>-->
                        <!--                        <span>出入库name</span>-->
                        <!--                    </div>-->
                    </div>
                </div>


                <div class="bigShelfBox rightBox clearFloat" @mouseenter="bigEnter(0)" @mouseleave="bigLeave()">
                    <div class="shelfBox top leftBox clearFloat" :style="style[0]" v-for="(item,index) in cellLists[0]">
                        <div class="shelf leftBox" :class="item.select==2?'sel':(item.have==2?'current':'')" :style="style2[0]"
                             @mouseenter="enter(index)" @mouseleave="leave()">
                            <div class="showBox" v-show="seen&&index==current&&bigSeen&&0==bigCurrent">
                                <p>
                                    第{{nowShowConten.row}}行，
                                    第{{nowShowConten.column}}列
                                </p>
                                <p>
                                    货物状态:{{nowShowConten.state}}
                                </p>
                                <span>
                                    &nbsp;&nbsp;&nbsp;(0-无货;1-有货;2-锁定;3-故障)
                                </span>

                                <!--                                <p v-if="item.have == 2">货物状态 : 有货 , 钢材 , 20米</p>-->
                                <!--                                <p v-else>货物状态 : 无货</p>-->
                            </div>
                        </div>
                    </div>
                </div>
                <p class="ddj rightBox">
                    <span class="smallCad">堆垛机</span>
                </p>

                <div class="bigShelfBox rightBox clearFloat" @mouseenter="bigEnter(1)" @mouseleave="bigLeave()">
                    <div class="shelfBox bottom leftBox clearFloat" :style="style[1]" v-for="(item,index) in cellLists[1]">
                        <div class="shelf leftBox" :class="item.state==1?'current':''" :style="style2[1]"
                             @mouseenter="enter(index)" @mouseleave="leave()">
                            <div class="showBox" v-show="seen&&index==current&&bigSeen&&1==bigCurrent">
                                <p>
                                    第{{nowShowConten.row}}行，
                                    第{{nowShowConten.column}}列
                                </p>
                                <p>
                                    货物状态:{{nowShowConten.state}}
                                </p>
                                <span>
                                    &nbsp;&nbsp;&nbsp;(0-无货;1-有货;2-锁定;3-故障)
                                </span>
                                <!--                            <p>仓储位置 : 第3巷道 , 第2排 , 第52列 , 第9层</p>-->
                                <!--                            <p>电气位置 : 第3巷道 , 第2排 , 第53列 , 第11层</p>-->
                                <!--                            <p v-if="item.have == 2">货物状态 : 有货 , 钢材 , 20米</p>-->
                                <!--                            <p v-else>货物状态 : 无货</p>-->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="shelfBottomNav rightBox clearFloat">
                    <div class="shelfNav">
                        <p class="clearFloat">
                            <span class="colorBlock notHave"></span>
                            <span class="colorBlockTitle">无货</span>
                        </p>
                        <p class="clearFloat">
                            <span class="p_Title">巷道合计</span>
                            <span class="colorBlockTitle">:</span>
                            <span class="colorBlockNumber">1507</span>
                        </p>
                        <p class="clearFloat">
                            <span class="p_Title">仓库统计</span>
                            <span class="colorBlockTitle">:</span>
                            <span class="colorBlockNumber">1507</span>
                        </p>
                    </div>
                    <div class="shelfNav">
                        <p class="clearFloat">
                            <span class="colorBlock have"></span>
                            <span class="colorBlockTitle">有货</span>
                        </p>
                        <p class="clearFloat">
                            <span class="p_Title">巷道合计</span>
                            <span class="colorBlockTitle">:</span>
                            <span class="colorBlockNumber">2</span>
                        </p>
                        <p class="clearFloat">
                            <span class="p_Title">仓库统计</span>
                            <span class="colorBlockTitle">:</span>
                            <span class="colorBlockNumber">2</span>
                        </p>
                    </div>
                    <div class="shelfNav">
                        <p class="clearFloat">
                            <span class="colorBlock select"></span>
                            <span class="colorBlockTitle">定位</span>
                        </p>
                        <p class="clearFloat">
                            <span class="p_Title">巷道合计</span>
                            <span class="colorBlockTitle">:</span>
                            <span class="colorBlockNumber">0</span>
                        </p>
                        <p class="clearFloat">
                            <span class="p_Title">仓库统计</span>
                            <span class="colorBlockTitle">:</span>
                            <span class="colorBlockNumber">0</span>
                        </p>
                    </div>
                </div>
            </div>
            <div v-show="tabsFlg==2">
                <div class="sousuo clearFloat">
                    <!--            <span>单据号</span>-->
                    <!--            <input type="text">-->
                    <span>物料名称</span>
                    <input type="text" name="itemName">
                    <span>物料编码</span>
                    <input type="text" name="itemCode">
                    <span>批次</span>
                    <input type="text" name="batch">
                    <button style="background: #0000ff;" @click="findCellInfoDto">查询</button>
                    <button>重置</button>
                </div>

                <table border="1" cellpadding="0" cellspacing="0" style="width: 80%;margin-left: 5%;text-align: center;">

                    <tr style="height: 40px;font-size: 16px;font-weight: bold;">

                    <td>物料名称</td>
                    <td>物料编码</td>
                    <td>批次</td>
                    <td>货架名</td>
                    <td>行</td>
                    <td>列</td>
                    </tr>

                    <tr v-for="item in cellInfoDtos" style="height: 40px;font-size: 14px;">

                        <td>{{item.itemName}}</td>
                        <td>{{item.itemCode}}</td>
                        <td>{{item.batch}}</td>
                        <td>{{item.shelfName}}</td>
                        <td>{{item.srow}}</td>
                        <td>{{item.scolumn}}</td>

                    </tr>
                </table>


            </div>



        </div>

        <div th:include="include::footer"></div>
        <script th:inline="javascript">
            var editFlag = [[${@permission.hasPermi('in:billInMaster:edit')}]];
            var removeFlag = [[${@permission.hasPermi('in:billInMaster:remove')}]];
            var prefix = ctx + "in/billInMaster";
            var detailPrefix = ctx + "in/billInDetail";
        </script>

        <script th:src="@{/ruoyi/in/cellList.js}"></script>


</body>
</html>
